@atlaskit/link-datasource 3.19.1 → 3.20.0

package/dist/esm/ui/confluence-search-modal/basic-filters/filters/date-range-picker/index.js

@@ -1,31 +1,124 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["as", "style"],
+  _excluded2 = ["as", "style"],
+  _excluded3 = ["as", "style"],
+  _excluded4 = ["as", "style"],
+  _excluded5 = ["as", "style"];
+import "./index.compiled.css";
+import { forwardRef } from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 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; }
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import { DatePicker } from '@atlaskit/datetime-picker';
 import ErrorIcon from '@atlaskit/icon/utility/migration/error';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Popup from '@atlaskit/popup';
-import { R400 } from '@atlaskit/theme/colors';
+import { N0, N20, N30, R400 } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
 import { useDatasourceAnalyticsEvents } from '../../../../../analytics';
 import { dateRangeMessages } from './messages';
 import { PopupComponent } from './PopupComponent';
-import { CustomDateWrapper, CustomDropdown, CustomDropdownItem, DatePickersWrapper, DateRangeErrorMessage, SelectDateRangeButton } from './styled';
+import { CustomDropdownItem } from "./styled";
+import { CustomDateWrapperOld, CustomDropdownItemOld, CustomDropdownOld, DatePickersWrapperOld, DateRangeErrorMessageOld, SelectDateRangeButtonOld } from './styled-old';
 import { PopupTrigger } from './trigger';
 import { getCurrentOptionLabel, getDropdownLabel, useInvalidDateRange } from './utils';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+var DateRangeErrorMessage = forwardRef(function (_ref, __cmplr) {
+  var _ref$as = _ref.as,
+    C = _ref$as === void 0 ? "div" : _ref$as,
+    __cmpls = _ref.style,
+    __cmplp = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_zulpv77o _11c8qk37 _1e0c1txw _19pk57x3 _bozgv77o _syaz1ick _4cvr1h6o", __cmplp.className])
+  }));
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+if (process.env.NODE_ENV !== 'production') {
+  DateRangeErrorMessage.displayName = 'DateRangeErrorMessage';
+}
+var CustomDropdown = forwardRef(function (_ref2, __cmplr) {
+  var _ref2$as = _ref2.as,
+    C = _ref2$as === void 0 ? "div" : _ref2$as,
+    __cmpls = _ref2.style,
+    __cmplp = _objectWithoutProperties(_ref2, _excluded2);
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_2rkoiti9 _1bsb5x59 _bfhk1j9a _16qs1sus _1pby16oo", __cmplp.className])
+  }));
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+if (process.env.NODE_ENV !== 'production') {
+  CustomDropdown.displayName = 'CustomDropdown';
+}
+var SelectDateRangeButton = forwardRef(function (_ref3, __cmplr) {
+  var _ref3$as = _ref3.as,
+    C = _ref3$as === void 0 ? "button" : _ref3$as,
+    __cmpls = _ref3.style,
+    __cmplp = _objectWithoutProperties(_ref3, _excluded3);
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_19itglyw _11c81kw7 _2rkoiti9 _bfhk1y9p _1bsbymf6 _4t3i1ylp _19pkutpp _irr3134c _d0altlke", __cmplp.className])
+  }));
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+if (process.env.NODE_ENV !== 'production') {
+  SelectDateRangeButton.displayName = 'SelectDateRangeButton';
+}
+var CustomDateWrapper = forwardRef(function (_ref4, __cmplr) {
+  var _ref4$as = _ref4.as,
+    C = _ref4$as === void 0 ? "div" : _ref4$as,
+    __cmpls = _ref4.style,
+    __cmplp = _objectWithoutProperties(_ref4, _excluded4);
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_ca0qutpp _u5f3utpp _n3tdutpp _19bvutpp _vchhusvi", __cmplp.className])
+  }));
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+if (process.env.NODE_ENV !== 'production') {
+  CustomDateWrapper.displayName = 'CustomDateWrapper';
+}
+var DatePickersWrapper = forwardRef(function (_ref5, __cmplr) {
+  var _ref5$as = _ref5.as,
+    C = _ref5$as === void 0 ? "div" : _ref5$as,
+    __cmpls = _ref5.style,
+    __cmplp = _objectWithoutProperties(_ref5, _excluded5);
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_1e0c1txw _1bah1yb4 _4cvr1h6o _1bsb1osq", __cmplp.className])
+  }));
+});
+if (process.env.NODE_ENV !== 'production') {
+  DatePickersWrapper.displayName = 'DatePickersWrapper';
+}
 var dateRangeValues = ['anyTime', 'today', 'yesterday', 'past7Days', 'past30Days', 'pastYear', 'custom'];
 var defaultOptionValue = 'anyTime';
-export var DateRangePicker = function DateRangePicker(_ref) {
-  var onSelectionChange = _ref.onSelectionChange,
-    selection = _ref.selection,
-    _ref$filterName = _ref.filterName,
-    filterName = _ref$filterName === void 0 ? 'datasource-date-range-picker' : _ref$filterName;
-  var _ref2 = selection || {},
-    selectedValue = _ref2.value,
-    fromDate = _ref2.from,
-    toDate = _ref2.to;
+export var DateRangePicker = function DateRangePicker(_ref6) {
+  var onSelectionChange = _ref6.onSelectionChange,
+    selection = _ref6.selection,
+    _ref6$filterName = _ref6.filterName,
+    filterName = _ref6$filterName === void 0 ? 'datasource-date-range-picker' : _ref6$filterName;
+  var _ref7 = selection || {},
+    selectedValue = _ref7.value,
+    fromDate = _ref7.from,
+    toDate = _ref7.to;
   var todayDate = new Date().toISOString();
   var _useIntl = useIntl(),
     locale = _useIntl.locale,
@@ -93,14 +186,8 @@ export var DateRangePicker = function DateRangePicker(_ref) {
       fireEvent('ui.dropdown.closed.basicSearchDropdown', analyticsPayload);
     }
   }, [analyticsPayload, fireEvent, isPickerOpen]);
-  return /*#__PURE__*/React.createElement(Popup, {
-    isOpen: !!isPickerOpen,
-    onClose: handlePickerToggle
-    // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
-    ,
-    popupComponent: PopupComponent,
-    zIndex: layers.modal(),
-    content: function content() {
+  var popupContent = function popupContent() {
+    if (fg('bandicoots-compiled-migration-link-datasource')) {
       return /*#__PURE__*/React.createElement(CustomDropdown, null, dateRangeValues.map(function (option) {
         return /*#__PURE__*/React.createElement(CustomDropdownItem, {
           key: option
@@ -160,14 +247,89 @@ export var DateRangePicker = function DateRangePicker(_ref) {
       })), invalidDateRange && /*#__PURE__*/React.createElement(DateRangeErrorMessage, null, /*#__PURE__*/React.createElement(ErrorIcon, {
         LEGACY_size: "small",
         color: "var(--ds-icon-danger, ".concat(R400, ")"),
-        label: "Date range error",
+        label: fg('bandicoots-update-sllv-icons') ? formatMessage(dateRangeMessages.dateRangeError) : 'Date range error',
         LEGACY_margin: "0 ".concat("var(--ds-space-negative-025, -2px)")
       }), invalidDateRange), /*#__PURE__*/React.createElement(SelectDateRangeButton, {
         "data-testId": "custom-date-range-update-button",
         disabled: Boolean(invalidDateRange),
         onClick: handleClickUpdateDateRange
       }, formatMessage(dateRangeMessages.dateRangeUpdateButton))));
-    },
+    }
+    return /*#__PURE__*/React.createElement(CustomDropdownOld, null, dateRangeValues.map(function (option) {
+      return /*#__PURE__*/React.createElement(CustomDropdownItemOld, {
+        key: option
+        // want to show Anytime as selected if none of the other options are selected
+        ,
+        isSelected: selectedValue ? option === selectedValue : option === defaultOptionValue,
+        onClick: function onClick() {
+          return handleClickFilterOption(option);
+        }
+      }, getDropdownLabel(option, formatMessage));
+    }), isPickerOpen && isCustomSelected && /*#__PURE__*/React.createElement(CustomDateWrapperOld, null, /*#__PURE__*/React.createElement(DatePickersWrapperOld, null, /*#__PURE__*/React.createElement(DatePicker, {
+      maxDate: todayDate,
+      innerProps: {
+        style: {
+          width: 140
+        }
+      },
+      testId: "date-from-picker",
+      dateFormat: "D MMM YYYY",
+      onChange: setCustomFromDate,
+      defaultValue: fromDate,
+      placeholder: formatMessage(dateRangeMessages.dateRangeFrom),
+      isInvalid: Boolean(invalidDateRange),
+      locale: locale,
+      selectProps: {
+        styles: {
+          placeholder: function placeholder(base) {
+            return _objectSpread(_objectSpread({}, base), {}, {
+              width: 'max-content'
+            });
+          }
+        }
+      }
+    }), /*#__PURE__*/React.createElement(FormattedMessage, dateRangeMessages.dateRangeToLabel), /*#__PURE__*/React.createElement(DatePicker, {
+      maxDate: todayDate,
+      innerProps: {
+        style: {
+          width: 140
+        }
+      },
+      testId: "date-to-picker",
+      dateFormat: "D MMM YYYY",
+      onChange: setCustomToDate,
+      defaultValue: toDate,
+      placeholder: formatMessage(dateRangeMessages.dateRangeTo),
+      isInvalid: Boolean(invalidDateRange),
+      locale: locale,
+      selectProps: {
+        styles: {
+          placeholder: function placeholder(base) {
+            return _objectSpread(_objectSpread({}, base), {}, {
+              width: 'max-content'
+            });
+          }
+        }
+      }
+    })), invalidDateRange && /*#__PURE__*/React.createElement(DateRangeErrorMessageOld, null, /*#__PURE__*/React.createElement(ErrorIcon, {
+      LEGACY_size: "small",
+      color: "var(--ds-icon-danger, ".concat(R400, ")"),
+      label: "Date range error",
+      LEGACY_margin: "0 ".concat("var(--ds-space-negative-025, -2px)")
+    }), invalidDateRange), /*#__PURE__*/React.createElement(SelectDateRangeButtonOld, {
+      "data-testId": "custom-date-range-update-button",
+      disabled: Boolean(invalidDateRange),
+      onClick: handleClickUpdateDateRange
+    }, formatMessage(dateRangeMessages.dateRangeUpdateButton))));
+  };
+  return /*#__PURE__*/React.createElement(Popup, {
+    isOpen: !!isPickerOpen,
+    onClose: handlePickerToggle
+    // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
+    ,
+    popupComponent: PopupComponent,
+    zIndex: layers.modal(),
+    content: popupContent,
     placement: "bottom-start",
     trigger: function trigger(triggerProps) {
       var labelText = getCurrentOptionLabel(formatDate, formatMessage, selectedValue, toDate, fromDate);

package/dist/esm/ui/confluence-search-modal/basic-filters/filters/date-range-picker/messages.js

@@ -89,5 +89,10 @@ export var dateRangeMessages = defineMessages({
     id: 'linkDataSource.confluence-search.configmodal.date.range.after.label',
     defaultMessage: 'after {date}',
     description: '`after date` for date picker dropdown'
+  },
+  dateRangeError: {
+    id: 'linkDataSource.confluence-search.configmodal.date.range.error',
+    defaultMessage: 'Date range error',
+    description: 'Label of the icon that is displayed before the error message'
   }
 });

package/dist/esm/ui/confluence-search-modal/basic-filters/filters/date-range-picker/styled-old.js

@@ -0,0 +1,92 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import styled from '@emotion/styled';
+import { B400, B50, N0, N20, N30, R400 } from '@atlaskit/theme/colors';
+import { layers } from '@atlaskit/theme/constants';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export var PopupComponentContainerOld = styled.div({
+  boxSizing: 'border-box',
+  display: 'block',
+  flex: '1 1 auto',
+  overflow: 'visible',
+  borderRadius: "var(--ds-border-radius-100, 4px)",
+  background: "var(--ds-background-input, ".concat(N0, ")"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  ':focus': {
+    outline: 'none'
+  },
+  boxShadow: "var(--ds-shadow-overlay, 0px 0px 1px 0px rgba(9, 30, 66, 0.31), 0px 3px 5px 0px rgba(9, 30, 66, 0.20))"
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export var CustomDropdownOld = styled.div({
+  width: '340px',
+  background: "var(--ds-background-input, ".concat(N0, ")"),
+  borderRadius: "var(--ds-border-radius-100, 4px)",
+  boxShadow: "var(--ds-shadow-overlay, 0px 0px 1px 0px rgba(9, 30, 66, 0.31), 0px 3px 5px 0px rgba(9, 30, 66, 0.20))",
+  zIndex: layers.modal()
+});
+
+// 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 var CustomDropdownItemOld = styled.div(function (props) {
+  return {
+    height: '36px',
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    paddingLeft: props.isSelected ? '15px' : '16px',
+    boxSizing: 'border-box',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    color: props.isSelected ? "var(--ds-text-selected, ".concat(B400, ")") : 'inherit',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    background: props.isSelected ? "var(--ds-background-accent-blue-subtlest, ".concat(B50, ")") : 'transparent',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    borderLeft: props.isSelected ? "2px solid ".concat("var(--ds-text-selected, ".concat(B400, ")")) : 'none',
+    '&:hover': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+      background: props.isSelected ? "var(--ds-background-accent-blue-subtlest, ".concat(B50, ")") : "var(--ds-background-input-hovered, ".concat(N20, ")"),
+      cursor: 'default'
+    }
+  };
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export var CustomDateWrapperOld = styled.div({
+  padding: "var(--ds-space-150, 12px)",
+  boxSizing: 'border-box'
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export var DatePickersWrapperOld = styled.div({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  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 var SelectDateRangeButtonOld = styled.button({
+  background: "var(--ds-background-accent-gray-subtler, ".concat(N20, ")"),
+  border: 'none',
+  font: 'inherit',
+  width: '70px',
+  height: '40px',
+  marginTop: "var(--ds-space-150, 12px)",
+  borderRadius: "var(--ds-border-radius-100, 4px)",
+  '&:hover': {
+    background: "var(--ds-background-accent-gray-subtler, ".concat(N30, ")"),
+    cursor: 'pointer'
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export var DateRangeErrorMessageOld = styled.div({
+  display: 'flex',
+  marginTop: "var(--ds-space-050, 2px)",
+  gap: "var(--ds-space-025, 2px)",
+  paddingInlineStart: "var(--ds-space-025, 2px)",
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  color: "var(--ds-text-danger, ".concat(R400, ")"),
+  alignItems: 'center'
+});

package/dist/esm/ui/confluence-search-modal/basic-filters/filters/date-range-picker/styled.compiled.css

@@ -0,0 +1,17 @@
+
+._1kl7ge6l{border-left:var(--_lthtsj)}
+._1kl7glyw{border-left:none}._19bvo7ao{padding-left:15px}
+._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
+._1bah1y6m{justify-content:flex-start}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}
+._4t3i14no{height:36px}
+._bfhk18uv{background-color:initial}
+._bfhkuu0u{background-color:var(--_1k02qo)}
+._syaz1kw7{color:inherit}
+._syazln51{color:var(--_1hfkvbo)}
+._vchhusvi{box-sizing:border-box}
+._d0al73ad:hover{cursor:default}
+._irr318n0:hover{background-color:var(--_hyt33l)}
+._irr3uu0u:hover{background-color:var(--_1k02qo)}

package/dist/esm/ui/confluence-search-modal/basic-filters/filters/date-range-picker/styled.js

@@ -1,92 +1,20 @@
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import styled from '@emotion/styled';
-import { B400, B50, N0, N20, N30, R400 } from '@atlaskit/theme/colors';
-import { layers } from '@atlaskit/theme/constants';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var PopupComponentContainer = styled.div({
-  boxSizing: 'border-box',
-  display: 'block',
-  flex: '1 1 auto',
-  overflow: 'visible',
-  borderRadius: "var(--ds-border-radius-100, 4px)",
-  background: "var(--ds-background-input, ".concat(N0, ")"),
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  ':focus': {
-    outline: 'none'
-  },
-  boxShadow: "var(--ds-shadow-overlay, 0px 0px 1px 0px rgba(9, 30, 66, 0.31), 0px 3px 5px 0px rgba(9, 30, 66, 0.20))"
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var CustomDropdown = styled.div({
-  width: '340px',
-  background: "var(--ds-background-input, ".concat(N0, ")"),
-  borderRadius: "var(--ds-border-radius-100, 4px)",
-  boxShadow: "var(--ds-shadow-overlay, 0px 0px 1px 0px rgba(9, 30, 66, 0.31), 0px 3px 5px 0px rgba(9, 30, 66, 0.20))",
-  zIndex: layers.modal()
-});
-
-// 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 var CustomDropdownItem = styled.div(function (props) {
-  return {
-    height: '36px',
-    width: '100%',
-    display: 'flex',
-    justifyContent: 'flex-start',
-    alignItems: 'center',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    paddingLeft: props.isSelected ? '15px' : '16px',
-    boxSizing: 'border-box',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    color: props.isSelected ? "var(--ds-text-selected, ".concat(B400, ")") : 'inherit',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    background: props.isSelected ? "var(--ds-background-accent-blue-subtlest, ".concat(B50, ")") : 'transparent',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    borderLeft: props.isSelected ? "2px solid ".concat("var(--ds-text-selected, ".concat(B400, ")")) : 'none',
-    '&:hover': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-      background: props.isSelected ? "var(--ds-background-accent-blue-subtlest, ".concat(B50, ")") : "var(--ds-background-input-hovered, ".concat(N20, ")"),
-      cursor: 'default'
+/* styled.tsx generated by @compiled/babel-plugin v0.36.0 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./styled.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { B400, B50, N20 } from "@atlaskit/theme/colors";
+var customDropdownItemBaseStyles = null;
+var customDropdownItemSelectedStyles = null;
+var customDropdownItemNotSelectedStyles = null;
+export var CustomDropdownItem = function CustomDropdownItem(props) {
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: ax(["_4t3i14no _1bsb1osq _1e0c1txw _1bah1y6m _4cvr1h6o _vchhusvi _d0al73ad", props.isSelected ? "_1kl7ge6l _19bvo7ao _syazln51 _bfhkuu0u _irr3uu0u" : "_1kl7glyw _19bvpxbi _syaz1kw7 _bfhk18uv _irr318n0"]),
+    style: {
+      "--_1hfkvbo": ix("var(--ds-text-selected, ".concat(B400, ")")),
+      "--_1k02qo": ix("var(--ds-background-accent-blue-subtlest, ".concat(B50, ")")),
+      "--_lthtsj": ix("2px solid ".concat("var(--ds-text-selected, ".concat(B400, ")"))),
+      "--_hyt33l": ix("var(--ds-background-input-hovered, ".concat(N20, ")"))
     }
-  };
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var CustomDateWrapper = styled.div({
-  padding: "var(--ds-space-150, 12px)",
-  boxSizing: 'border-box'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var DatePickersWrapper = styled.div({
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  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 var SelectDateRangeButton = styled.button({
-  background: "var(--ds-background-accent-gray-subtler, ".concat(N20, ")"),
-  border: 'none',
-  font: 'inherit',
-  width: '70px',
-  height: '40px',
-  marginTop: "var(--ds-space-150, 12px)",
-  borderRadius: "var(--ds-border-radius-100, 4px)",
-  '&:hover': {
-    background: "var(--ds-background-accent-gray-subtler, ".concat(N30, ")"),
-    cursor: 'pointer'
-  }
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var DateRangeErrorMessage = styled.div({
-  display: 'flex',
-  marginTop: "var(--ds-space-050, 2px)",
-  gap: "var(--ds-space-025, 2px)",
-  paddingInlineStart: "var(--ds-space-025, 2px)",
-  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  color: "var(--ds-text-danger, ".concat(R400, ")"),
-  alignItems: 'center'
-});
+  }), props.children);
+};

package/dist/esm/ui/confluence-search-modal/basic-filters/index.compiled.css

@@ -0,0 +1 @@
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}

package/dist/esm/ui/confluence-search-modal/basic-filters/index.js

@@ -1,15 +1,20 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 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; }
 import React from 'react';
-import { Flex, xcss } from '@atlaskit/primitives';
+import { fg } from "@atlaskit/platform-feature-flags";
+import { Flex } from '@atlaskit/primitives/compiled';
+import BasicFilterContainerOld from './basic-filters-old';
 import { DateRangePicker } from './filters/date-range-picker';
 import EditedOrCreatedByFilter from './filters/edited-or-created-by';
 import { CLOLBasicFilters } from './types';
-var basicFilterContainerStyles = xcss({
-  paddingLeft: 'space.100'
-});
+var styles = {
+  basicFilterContainerStyles: "_19bvu2gc"
+};
 var BasicFilterContainer = function BasicFilterContainer(_ref) {
   var cloudId = _ref.cloudId,
     onChange = _ref.onChange,
@@ -29,7 +34,7 @@ var BasicFilterContainer = function BasicFilterContainer(_ref) {
     }, updatedOption));
   };
   return /*#__PURE__*/React.createElement(Flex, {
-    xcss: basicFilterContainerStyles,
+    xcss: styles.basicFilterContainerStyles,
     gap: "space.100",
     testId: "clol-basic-filter-container"
   }, /*#__PURE__*/React.createElement(EditedOrCreatedByFilter, {
@@ -43,4 +48,11 @@ var BasicFilterContainer = function BasicFilterContainer(_ref) {
     filterName: "clol-basic-filter-".concat(CLOLBasicFilters.lastModified)
   }));
 };
-export default BasicFilterContainer;
+var BasicFilterContainerExported = function BasicFilterContainerExported(props) {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(BasicFilterContainer, props);
+  } else {
+    return /*#__PURE__*/React.createElement(BasicFilterContainerOld, props);
+  }
+};
+export default BasicFilterContainerExported;

package/dist/esm/ui/confluence-search-modal/confluence-search-container/confluence-search-container-old.js

@@ -0,0 +1,117 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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; }
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useDebouncedCallback } from 'use-debounce';
+import { Flex, xcss } from '@atlaskit/primitives';
+import { BasicSearchInput } from '../../common/modal/basic-search-input';
+import { FILTER_SELECTION_DEBOUNCE_MS } from '../../common/modal/popup-select/constants';
+import BasicFilters from '../basic-filters';
+import { useBasicFilterHydration } from '../basic-filters/hooks/useBasicFilterHydration';
+import { CLOLBasicFilters } from '../basic-filters/types';
+import { searchMessages } from './messages';
+var basicSearchInputContainerStyles = xcss({
+  flexGrow: 1
+});
+var ConfluenceSearchContainer = function ConfluenceSearchContainer(_ref) {
+  var _ref$parameters = _ref.parameters,
+    cloudId = _ref$parameters.cloudId,
+    initialSearchValue = _ref$parameters.searchString,
+    lastModified = _ref$parameters.lastModified,
+    lastModifiedFrom = _ref$parameters.lastModifiedFrom,
+    lastModifiedTo = _ref$parameters.lastModifiedTo,
+    contributorAccountIds = _ref$parameters.contributorAccountIds,
+    isSearching = _ref.isSearching,
+    onSearch = _ref.onSearch;
+  var _useBasicFilterHydrat = useBasicFilterHydration(),
+    hydrateUsersFromAccountIds = _useBasicFilterHydrat.hydrateUsersFromAccountIds,
+    users = _useBasicFilterHydrat.users,
+    status = _useBasicFilterHydrat.status,
+    resetHydrationHook = _useBasicFilterHydrat.reset;
+  var currentCloudId = useRef(cloudId);
+  var _useState = useState(contributorAccountIds !== null && contributorAccountIds !== void 0 ? contributorAccountIds : []),
+    _useState2 = _slicedToArray(_useState, 2),
+    initialContributorAccountIds = _useState2[0],
+    setInitialContributorAccountIds = _useState2[1];
+  var _useState3 = useState(initialSearchValue !== null && initialSearchValue !== void 0 ? initialSearchValue : ''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    searchBarSearchString = _useState4[0],
+    setSearchBarSearchString = _useState4[1];
+  var _useState5 = useState(function () {
+      return lastModified ? {
+        lastModified: [{
+          optionType: 'dateRange',
+          label: lastModified,
+          value: lastModified,
+          from: lastModifiedFrom,
+          to: lastModifiedTo
+        }]
+      } : {};
+    }),
+    _useState6 = _slicedToArray(_useState5, 2),
+    filterSelections = _useState6[0],
+    setFilterSelections = _useState6[1];
+  var handleSearchChange = useCallback(function (e) {
+    var rawSearch = e.currentTarget.value;
+    setSearchBarSearchString(rawSearch);
+  }, []);
+  var _useDebouncedCallback = useDebouncedCallback(function (filterValues) {
+      onSearch(searchBarSearchString, filterValues);
+    }, FILTER_SELECTION_DEBOUNCE_MS),
+    _useDebouncedCallback2 = _slicedToArray(_useDebouncedCallback, 1),
+    debouncedBasicFilterSelectionChange = _useDebouncedCallback2[0];
+  var handleBasicFilterSelectionChange = useCallback(function (filterType, options) {
+    var updatedSelection = _objectSpread(_objectSpread({}, filterSelections), {}, _defineProperty({}, filterType, Array.isArray(options) ? options : [options]));
+    setFilterSelections(updatedSelection);
+    if (filterType === CLOLBasicFilters.lastModified) {
+      onSearch(searchBarSearchString, updatedSelection);
+    } else {
+      debouncedBasicFilterSelectionChange(updatedSelection);
+    }
+  }, [debouncedBasicFilterSelectionChange, filterSelections, onSearch, searchBarSearchString]);
+
+  // TODO: further refactoring in EDM-9573
+  // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/82725/overview?commentId=6827913
+  useEffect(function () {
+    if (currentCloudId.current !== cloudId) {
+      setInitialContributorAccountIds([]);
+      resetHydrationHook();
+      setSearchBarSearchString('');
+      setFilterSelections({});
+      currentCloudId.current = cloudId;
+    }
+  }, [cloudId, resetHydrationHook]);
+  useEffect(function () {
+    var hasAccountIds = (initialContributorAccountIds === null || initialContributorAccountIds === void 0 ? void 0 : initialContributorAccountIds.length) > 0;
+    if (hasAccountIds && status === 'empty') {
+      hydrateUsersFromAccountIds(initialContributorAccountIds);
+    }
+  }, [hydrateUsersFromAccountIds, initialContributorAccountIds, status]);
+  useEffect(function () {
+    if (status === 'resolved') {
+      setFilterSelections({
+        lastModified: filterSelections.lastModified,
+        editedOrCreatedBy: users
+      });
+    }
+  }, [users, status, filterSelections.lastModified]);
+  return /*#__PURE__*/React.createElement(Flex, {
+    alignItems: "center",
+    xcss: basicSearchInputContainerStyles
+  }, /*#__PURE__*/React.createElement(BasicSearchInput, {
+    testId: "confluence-search-datasource-modal",
+    isSearching: isSearching,
+    onChange: handleSearchChange,
+    onSearch: onSearch,
+    searchTerm: searchBarSearchString,
+    placeholder: searchMessages.searchLabel,
+    fullWidth: false
+  }), /*#__PURE__*/React.createElement(BasicFilters, {
+    cloudId: cloudId,
+    selections: filterSelections,
+    onChange: handleBasicFilterSelectionChange,
+    isHydrating: status === 'loading'
+  }));
+};
+export default ConfluenceSearchContainer;

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

@@ -0,0 +1 @@
+._16jlkb7n{flex-grow:1}